import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import { connect } from 'dva';
import router from 'umi/router'
import './index.less';

import HeaderSearch from './component/HeaderSearch'
import Paging from 'components/common/paging'
import repairCn from 'columns/deviceRepair'
import { Popover } from 'antd'

function ReformSingle({ dispatch, keyId, query, deviceRepair: { reftList } }) {
  // 初始化form表单数据
  const initForm = () => {
    // 没有关闭页面得情况下，是否有缓存数据，有则优先展示缓存数据
    const formData = localStorage.getItem('reformData')
    if (formData) {
      return JSON.parse(formData)
    }
    return {
      deviceName: '',//设备名称
      groupName: '',//使用部门
      repairClerk: '',//报修员
      repairman: '',//维修员
      repairmanTel: '',//维修员电话
      state: '', //状态
      repairStartTime: '',//开始时间
      repairEndTime: '',//结束时间
      current: '1',// 当前页码
      size: '10',
    }
  }

  // 当前页码
  const [current, setCurrent] = useState('1')
  // 搜索框数据
  const [formData, setFormData] = useState(initForm())

  useEffect(() => {
    // 根据keyID来判断是否展示此页面，是才获取数据
    if (keyId === 'reformSingle') {
      // 获取新数据
      dispatch({
        type: 'deviceRepair/getReftList',
        payload: { ...formData }
      })
    }
    // 切换tabs缓存数据
    localStorage.setItem('reformData', JSON.stringify(formData))
  }, [dispatch, formData, keyId])

  // 页码
  const handlePageChange1 = (page) => {
    dispatch({
      type: 'deviceRepair/getReftList',
      payload: {
        ...formData,
        current: page
      }
    })
    localStorage.setItem('reformData', JSON.stringify({
      ...formData,
      current: page
    }))
    setCurrent(page)
  }

  // 搜素查询数据
  const searchBtn = (values) => {
    setFormData(values)
  }

  const reformStates = (key) => {
    switch (key) {
      case 1:
        return '整改中';
      case 2:
        return '待验收';
      case 3:
        return '整改完成';
      case 4:
        return '整改失败';
      case 5:
        return '超时未完成';
      default:
        return
    }
  }

  // 跳转整改详情页
  const toDetail = (r) => {
    router.push({
      pathname: '/deviceRepair/RctificationDetails',
      query: {
        id: r.id,
        orderId: r.orderId,
        preStatus: r.status,
        formData
      },
    });
  }

  repairCn.reformList[0].render = (t, r, i) => (reftList.current - 1) * 10 + i + 1;
  repairCn.reformList[repairCn.reformList.length - 1].render = (t, r) => (
    <div className='actionBtn'>
      {
        Number(r.status) === 2 ? <span onClick={() => toDetail(r)} className='btnStyl'>验收</span> : null
      }
      <span onClick={() => toDetail(r)} className='btnStyl'>查看详情</span>
    </div>
  )
  repairCn.reformList[repairCn.reformList.length - 2].render = (t, r) => (
    <span>{reformStates(r && r.status)}</span>
  )
  // 维修描述
  repairCn.reformList[3].render = (t, r) => {
    return (
      <>
        {
          t && t.length > 10
            ?
            <Popover content={t} placement="bottom" getPopupContainer={triggerNode => triggerNode.parentNode}>
              {/* <span style={{ cursor: 'pointer'}}> */}
              <span style={{ cursor: 'pointer' }}>
                {t.slice(0, 10) + '...'}
              </span>
            </Popover>
            :
            t
        }
      </>
    )
  }



  return (
    <div className="reformSingle">
      {/* 头部搜索框 */}
      <HeaderSearch type={keyId} searchBtn={searchBtn} query={query} />
      {/* 表单 */}
      <div style={{ padding: '0 0.25rem'}}>
        <Table
          // loading={reftList && reftList.records && reftList.records.length > 0 ? false : true}
          columns={reftList && repairCn.reformList}
          dataSource={reftList && reftList.records}
          pagination={false}
          bordered={true}
          className="self-table"
        // rowKey={(records) => records.orderId}
        />
        {/* 页码 */}
        <Paging
          total={reftList && reftList.total || 0}
          pageSize={10}
          handlePageChange={handlePageChange1}
          pageCount={reftList && reftList.current || 0}
          pages={reftList && reftList.pages || 0}
        />
      </div>
    </div>
  );
}

export default connect(({ deviceRepair }) => ({
  deviceRepair,
}))(ReformSingle);
